
import { useState, useEffect } from 'react'
import './App.css'
import _ from 'lodash'

 const Animation = (props) => {
    // console.log(props)
    const {
      animation = false, // 父组件没传值，默认为false
      transitionStyles = {enter: {opacity: 1}, leave: {opacity: 0}},
      children
    } = props
    // console.log(animation, transitionStyle, children,'++++')
    // 函数运行的返回值
    const [status, setStatus] = useState(() => {
      console.log('*********')
      if(animation) return 'enter';
      else return 'leave'
    });

    useEffect(() => setStatus(animation?'enter':'leave'), [animation])
      
    const prevStyle = children?.props?.style || {};
    // console.log(prevStyle)
    const animationStyle = transitionStyles[status];
    // console.log(animationStyle)
    const transitionStyle = {transition: `all 300ms ease-in-out`}
    const styles = {...prevStyle, ...animationStyle, ...transitionStyle}
      // return React.cloneElement(
      //   React.children.only(children),
      //   {
      //     style: {
      //       ...styles
      //     }
      //   }
      // )
      return (
        <div style={{...styles}}>
          {children}
        </div>
      )
  }
function App() {
  const [play, setPlay] = useState(false);
 
  return (
    <div className="container">
        <button onClick={() => setPlay(!play)}>切换</button>
        <Animation animation={play}>
            <div className='box' ></div>
        </Animation>
   </div>
  )
}

export default App
